<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应窗口的iframe</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }
        .iframe-container {
            position: relative;
            width: 100%;
            border: 2px solid #e2e8f0;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        iframe {
            border: none;
            transition: all 0.3s ease;
        }
        .info-panel {
            background-color: #f8fafc;
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
            border: 1px solid #e2e8f0;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-2xl font-bold text-gray-800 mb-4">自适应窗口的iframe演示</h1>
        
        <div class="info-panel">
            <p class="text-gray-600">
                <i class="fa fa-info-circle text-blue-500 mr-2"></i>
                下方的iframe会自动适应窗口大小，尝试调整浏览器窗口尺寸查看效果
            </p>
            <div class="mt-2 text-sm text-gray-500">
                当前窗口宽度: <span id="window-width" class="font-medium">0</span>px |
                当前iframe宽度: <span id="iframe-width" class="font-medium">0</span>px
            </div>
        </div>
        
        <div class="iframe-container">
            <iframe id="responsive-iframe" src="https://how2j.cn/"></iframe>
        </div>
    </div>

    <script>
        // 获取iframe元素
        const iframe = document.getElementById('responsive-iframe');
        const windowWidthEl = document.getElementById('window-width');
        const iframeWidthEl = document.getElementById('iframe-width');
        
        // 定义自适应函数
        function resizeIframe() {
            // 获取容器宽度
            const containerWidth = iframe.parentElement.clientWidth;
            
            // 根据窗口宽度设置不同的高度比例
            let height;
            const windowWidth = window.innerWidth;
            
            // 使用if条件判断不同窗口尺寸下的高度设置
            if (windowWidth < 640) {
                // 移动设备 - 更高的高度比例
                height = containerWidth * 1.5;
            } else if (windowWidth < 1024) {
                // 平板设备 - 中等高度比例
                height = containerWidth * 1.2;
            } else {
                // 桌面设备 - 标准高度比例
                height = containerWidth * 0.8;
            }
            
            // 设置iframe尺寸
            iframe.style.width = `${containerWidth}px`;
            iframe.style.height = `${height}px`;
            
            // 更新信息面板
            windowWidthEl.textContent = windowWidth;
            iframeWidthEl.textContent = containerWidth;
        }
        
        // 初始加载时调整一次
        resizeIframe();
        
        // 监听窗口大小变化，动态调整iframe
        window.addEventListener('resize', resizeIframe);
        
        // 监听iframe加载完成，确保内容正确显示
        iframe.addEventListener('load', function() {
            // 加载完成后再调整一次，确保准确性
            resizeIframe();
        });
    </script>
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="vue/vue.min.js"></script>
	<script type="text/javascript" src="vue/vue_config.js"></script>
	<script type="text/javascript" src="vue/axios.min.js"></script>
	<script type="text/javascript" src="vue/vue_api.js"></script>
	<script type="text/javascript" src="vue/commons.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#vue',
			data: {
			},
			created() {
				
			},
			mounted() {
				
			},
	
			methods: {
				
			}
	
		})
	</script>
</body>
</html>


